<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹窗组件</title>
		<script src="../vue@3.2.23.js"></script>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.popup_box{
				width: 100vw;
				height: 100vh;
				position: fixed;
				background: rgba(000, 000, 000, 0.5);
				top: 0px;
				left: 0px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.content_box{
				width: 30%;
				height: 30%;
				background-color: white;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 12px 12px 20px;
			}
			.info_box{
				box-sizing: border-box;
				padding: 0px 50px;
				font-size: 18px;
				width: 100%;
			}
			button{
				padding: 4px 12px;
				font-size: 16px;
				border-radius: 4px;
				border: none;
				color: #ffffff;
			}
			button:not(:first-child){
				margin-left: 20px;
			}
			.but_ok{
				background-color: seagreen;
			}
			.but_warn{
				background-color: orange;
			}
			.but_not{
				background-color: darkred;
				
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table border="1" style="text-align: center;">
				<tr>
					<td>序号</td>
					<td>商品名称</td>
					<td>价格</td>
					<td>选择数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr v-for="(val,index) in goods" :key="index">
					<td>{{index+1}}</td>
					<td>{{val.title}}</td>
					<td>{{val.price}}</td>
					<td>{{val.chooseNum}}</td>
					<td>{{val.allPrice}}</td>
					<td>
						<!-- 动态事件绑定 -->
						<button type="button" :class="but.className" @[but.eventname]="handelClick(but.type,index)" v-for="but in val.optConfig">{{but.text}}</button>
					</td>
				</tr>
			</table>
			
			<popup-center v-if="popupShow" :pop-config="popConfig" v-model="popupShow" @but-click="butClick"></popup-center>
		</div>
	</body>
</html>
<script>
	
	const app = Vue.createApp({
		data() {
			
			const optConfig = [
					{
						text:'减少',
						eventname:'click',
						className:{"but_warn":true},
						type:0
					},
					{
						text:'添加',
						eventname:'click',
						className:{"but_ok":true},
						type:1
					},
					{
						text:'删除',
						eventname:'dblclick',
						className:{"but_not":true},
						type:2
					},
					{
						text:'修改',
						eventname:'click',
						className:{"but_warn":true},
						type:3
					},
				]
			return {
				goods:[
					{
						title:'柠檬茶',
						price:30,
						chooseNum:0,
						allPrice:0,
						optConfig
					},
					{
						title:'红茶',
						price:30,
						chooseNum:0,
						allPrice:0,
						optConfig
					}
				],
				popupShow:false,
				popConfig:{
					tipText:'你确定要执行当前操作吗？',
					butInfo:[
						{
							text:'确定',
							eventname:'click',
							className:{"but_warn":true},
							type:'ok'
						},
						{
							text:'取消',
							eventname:'click',
							className:{"but_ok":true},
							type:'cancel'
						}
					]
				},
				optInfo:{
					optType:undefined,
					optIndex:NaN
				}
				
			}
		},
		methods:{
			handelClick(type,index){
				this.optInfo.optType = type
				this.optInfo.optIndex = index
				switch (type){
					case 0:
						this.popConfig.tipText = ''
						break;
					case 2:
						this.popConfig.tipText = '你确定要删除此项吗？删除之后无法恢复'
						this.popupShow = true;
						
						break;
					case 3:
						this.popConfig.tipText = '你确定要修改此项吗？'
						this.popupShow = true;
						break;
					default:
						break;
				}
			},
			butClick(type){
				this.popupShow = false;
				console.log(type);
				if(type === 'ok'){
					switch (this.optInfo.optType){
						case 0:
							this.popConfig.tipText = ''
							break;
						case 2:
							this.goods.splice(this.optInfo.optIndex,1)
							break;
						case 3:
							console.log('执行修改')
							break;
						default:
							break;
					}
				}
			}
		}
	})
	app.component('popup-center',{
		props: {
			modelValue:Boolean,
			popConfig: {
				default: function(){
					return{
						tipText:'',
						butInfo:[
							{
								text:'确定',
								eventname:'click',
								className:{"but_warn":true},
								type:'ok'
							},
							{
								text:'取消',
								eventname:'click',
								className:{"but_ok":true},
								type:'cancel'
							}
						]
					}
				}
			},
		},
		methods:{
			handelClick(type){
				this.$emit('butClick',type)
			}
		},
		template:
		`
			<div class="popup_box">
				<div class="content_box">
					<div class="close_but" @click="$emit('update:modelValue',false)">X</div>
					<div class="info_box">{{popConfig.tipText}}</div>
					<div class="but_box">
						<button :class="val.className" @[val.eventname]="handelClick(val.type)" v-for="val in popConfig.butInfo" type="button">{{val.text}}</button>
					</div>
				</div>
			</div>
		`
	})
	const vm = app.mount("#app")
</script>